<script lang="ts" setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";

const chart = {
    instance: null as echarts.ECharts | null,
    option: {
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        grid: { left: "10%", top: "10", right: "5%", bottom: "20" },
        xAxis: {
            type: "category",
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { color: "#72757e" },
            axisLine: { lineStyle: { color: "#fff" } },
            data: ["2020年", "2021年", "2022年", "2023年", "2024年"],
        },
        yAxis: {
            type: "value",
            splitLine: { show: false },
            axisTick: { show: false },
            axisLine: { show: false },
        },
        series: [
            {
                type: "bar",
                barWidth: 16,
                showBackground: true,
                backgroundStyle: { color: "#d8eaf499" },
                itemStyle: { borderRadius: 4 },
                data: [
                    {
                        value: 7684,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.4, color: "#1bcd9c" },
                                { offset: 1, color: "#1bcd9c33" },
                            ]),
                        },
                    },
                    {
                        value: 9847,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.4, color: "#46a6e1" },
                                { offset: 1, color: "#46a6e133" },
                            ]),
                        },
                    },
                    {
                        value: 12100,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.4, color: "#938de6" },
                                { offset: 1, color: "#938de633" },
                            ]),
                        },
                    },
                    {
                        value: 10183,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.4, color: "#e8a840" },
                                { offset: 1, color: "#e8a84033" },
                            ]),
                        },
                    },
                    {
                        value: 6481,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0.4, color: "#cb573a" },
                                { offset: 1, color: "#cb573a33" },
                            ]),
                        },
                    },
                ],
            },
        ],
    },
};
const oChart = ref<HTMLDivElement | null>(null);
onMounted(() => {
    chart.instance = echarts.init(oChart.value);
    chart.instance.setOption(chart.option);
});
</script>

<template>
    <section>
        <cite>
            <svg class="icon" aria-hidden="true"><use xlink:href="#icon-earth-full"></use></svg>
            <h1>年产量</h1>
        </cite>
        <div ref="oChart" class="content"></div>
    </section>
</template>

<style lang="scss" scoped>
@use "../styles/section.scss";
</style>
